<!doctype html>
<html lang="en">
<head>
  <title>WebGL Demo</title>
  <meta charset="utf-8">
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script id="vertex-shader-2d" type="notjs">

  attribute vec4 a_position;

  uniform vec4 u_translation;

  void main() {
     gl_Position = u_translation+a_position;
  }


</script>

<script id="fragment-shader-2d" type="notjs">
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1, 0, 0.5, 1);
  }


</script>

<script>
  main();

  function main() {
    const canvas = document.querySelector('#glcanvas');

    const gl = canvas.getContext('webgl');

    if (!gl) {
      alert('不支持该浏览器！');
      return;
    }

    //并称为
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    //找到刚刚创建的程序属性位置
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var translationUniformLocation = gl.getUniformLocation(program, "u_translation");


    //创建缓冲区
    var positionBuffer = gl.createBuffer();

    //将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    //通过绑定点应用缓冲区中的数据
    var positions = [
      0,0,
      0,0.5,
      0.5,0
    ];
    //向缓冲区对象中写入数据
    //gl.bufferData(target,data,usage)
    //  tarage   ->ARRAY_BUFFER或ELEMENT_ARRAY_BUFFER
    //  usage    ->STATIC_DRAW只会向缓冲区对象中写入一次数据，但需要绘制很多次
    //           ->STREAM_DRAW只会向缓冲区对象中写入一次数据，然后绘制若干次
    //           ->DYNAMIC_DRAW会向缓冲区对象中多次写入数据，并绘制很多次

    //类型化数组方法
    //get(index)  获取index个元素值
    //set(index,value) 设置index元素的值为value
    //set(array,offset) 从offset个元素开始将数组array中的值填充进去
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    //转换gl_Positon返回像素，称为屏幕空间。可用把gl.viewport把画布的当前大小传递给它
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    //把画布清理干净
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);


    //告诉webgl要执行那个着色器程序
    gl.useProgram(program);

    //连接a_positon变量于分配给它的缓冲区对象
    gl.enableVertexAttribArray(positionAttributeLocation);

    //绑定位置缓冲区。--
    // ARRAY_BUFFER表示缓冲区对象中包含顶点得数据
    // ELEMENT_ARRAY_BUFFER表示缓冲区对象中包含顶点的索引值
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);


    //gl.vertexAttribPointer(location,size,type,normalized,stride,offset)
    //location   指定待分配attribute变量储存位置
    //size        指定缓冲区中每个顶点的分量个数（1到4个）
    //type     UNSIGEND_BYTE无符号字节，SHORT短整型，UNSIGNED_SHORT无符号短整型，FLOAT浮点型，，，等
    //normalize    传入true或false，表面是否将非非浮点型的整数数据归一到[0,1]或[-1,1]区间
    //stride     指定相邻两个顶点间的字节数，默认0
    //offset     指定缓冲区对象的偏移量。如果是从起始位置开始的，设置为0
    // 告诉属性如何从位置缓冲区获取数据(数组_缓冲器)
    var size = 2;          // 每次迭代2个组件
    var type = gl.FLOAT;   // 数据为32位浮点数。
    var normalize = false; // 不要标准化数据
    var stride = 0;        // 0=向前移动，大小*每次迭代的大小(类型)，以获得下一个位置
    var offset = 0;        // 从缓冲区的开头开始
    //将缓冲区对象分配给attribute变量（positionAttributeLocation）
    gl.vertexAttribPointer(
      positionAttributeLocation, size, type, normalize, stride, offset)

    //向左平移0.2
    gl.uniform4f(translationUniformLocation, 0.2,0.0,0.0,0.0);

    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 3;
    //gl.drawArrays(mode,first,count)
    //                                   点       线段   线条       回路        三角形    三角带       三角扇
    //mode 指定绘制方式，可接收以下常量符号：POINTS,LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,TRIANGLE_FAN
    gl.drawArrays(primitiveType, offset, count);
  }
</script>
</html>
